<template>
  <div class="w-full flex justify-between flex-col" :style="{ height: props.height + 'px' }">
    <div v-for="(i, index) in Array.from(binary)" 
      class="w-full" 
      :style="{ height: yaoHeigth + 'px' }" 
      @click="handleClick(i, index)">
      <div v-if="i === '1'" class="h-full" :style="margeStyle(index)">
      </div>
      <div v-else class="h-full flex">
        <div class="h-full w-45% mr-10%" :style="margeStyle(index)"></div>
        <div class="h-full w-45% " :style="margeStyle(index)"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const binary = defineModel('binary', { required: true })

const props = defineProps({
  height: {
    type: Number,
    default() {
      return 300
    }
  },
  edited: {
    type: Boolean,
    default() {
      return false
    }
  },
  active: {
    type: Boolean,
    default() {
      return false
    }
  },
  bianYaoList: {
    type: Array,
    default() {
      return []
    }
  }
})

const theme = useThemeVars()

const bianYaoIndexList = computed(()=> props.bianYaoList.map(item => 6 - item))

const colorStyle = computed(()=> ({ 'background-color': props.active ? theme.value.primaryColorHover : theme.value.textColor1 }))

const margeStyle = (index) => {
    return !bianYaoIndexList.value.includes(index) ? colorStyle.value : { 'background-color': theme.value.errorColorHover }
}

const yaoHeigth = computed(()=> (props.height / binary.value.length / 3 * 2))

const handleClick = (val, index) => {
  if (!props.edited) return
  const newVal = val === '1' ? '0' : '1'
  const updatedBinary = binary.value.substring(0, index) + newVal + binary.value.substring(index + 1);
  binary.value = updatedBinary;
}

</script>